<template>
    <div class="bottom_class">
        <div class="legend_box"></div>
        <div class="parameter_box"></div>
        <div class="other_box"></div>
        <div class="img_box">
            <img src="./theme/img/compass.png" alt="" />
        </div>
        <div class="scaleBar_box">
            <span>1:{{ scale }}</span>
            <div class="scaleBar">
                <div class="scaleBar_cell black"></div>
                <div class="scaleBar_cell wihte"></div>
                <div class="scaleBar_cell black"></div>
            </div>
            <div class="value-box">
                <span>0</span>
                <span>{{ dis }}</span>
                <span>{{ doubleDis }}</span>
                <span>{{ tripleDis }}km</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bottom',
    data() {
        return {
            scale: '',
            dis: '',
            tripleDis: '',
            doubleDis: '',
        };
    },
    props: {
        point: Array,
    },
    methods: {
        // 判断是否是小数
        isFloat(num) {
            return parseInt(num, 10) < parseFloat(num, 10);
        },
        // 计算比例尺
        distance(lat1, lng1, lat2, lng2) {
            let radLat1 = (lat1 * Math.PI) / 180.0;
            let radLat2 = (lat2 * Math.PI) / 180.0;
            let radLng1 = (lng1 * Math.PI) / 180.0;
            let radLng2 = (lng2 * Math.PI) / 180.0;
            let a = radLat1 - radLat2;
            let b = radLng1 - radLng2;
            let s =
                2 *
                Math.asin(
                    Math.sqrt(
                        Math.pow(Math.sin(a / 2), 2) +
                            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
                    )
                );
            s = s * 6378.137;
            this.s = Math.round(s * 1000);
            this.scale = (this.s * 100) / 10;
            this.dis = this.scale / 100000;
            this.dis = this.isFloat(this.dis) ? this.dis.toFixed(3) : this.dis;
            this.doubleDis = this.isFloat(this.dis) ? (2 * this.dis).toFixed(3) : 2 * this.dis;
            this.tripleDis = this.isFloat(this.dis) ? (3 * this.dis).toFixed(3) : 3 * this.dis;
        },
        init() {
            this.distance(
                this.point[0].lat,
                this.point[1].lng,
                this.point[1].lat,
                this.point[1].lng
            );
        },
    },
    watch: {
        point: {
            handler(newV) {
                console.log(newV);
                this.init();
            },
            deep: true,
        },
    },
};
</script>

<style lang="scss" scoped>
@import './theme/css/scienceshotsStatic-N.scss';
.img_box {
    position: absolute;
    bottom: 70px;
    text-align: left;
    margin-left: 95px;
    img {
        width: 36px;
        height: 53px;
    }
}
.scaleBar_box {
    position: absolute;
    bottom: 3px;
    margin-left: 40px;
    .scaleBar {
        margin-top: 5px;
        .scaleBar_cell {
            float: left;
            width: 50px;
            height: 4px;
            border: 0.5px solid #000;
        }
        .black {
            background: #000;
        }
        .white {
            border: none;
            width: 51px;
        }
    }
    .value-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        :nth-child(1) {
            transform: translate(-50%);
        }
        :nth-child(2) {
            transform: translate(60%);
        }
        :nth-child(3) {
            transform: translate(60%);
        }
        :nth-child(4) {
            transform: translate(50%);
        }
    }
}
</style>
